import React, { Fragment } from 'react';
import { Card, Content, Table } from 'react-fule-ui';
import { tableList, funList } from './test';
import './index.scss';
export default function FuleTable(props) {
  return (
    <Fragment>
      <Content>
        <Content.Header>表格</Content.Header>
        <Content.Body>
          <Card>
            <Table
              records={tableList}
              columns={[
                {
                  key: 'demoId',
                  width: '50%',
                  header: 'ID',
                  render: (data) => (
                    <Fragment>
                      <div>{data.demoId}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'demoName',
                  width: '50%',
                  header: '产品信息',
                },
              ]}
            />
          </Card>
          <Card>
            <Table
              records={funList}
              columns={[
                {
                  key: 'name',
                  header: 'name',
                  width: '200',
                  render: (data) => (
                    <Fragment>
                      <div>{data.name}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'item',
                  header: '产品信息',
                  width: '160',
                },
                {
                  key: 'smart',
                  header: 'smart',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.smart)}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'live',
                  header: 'live',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.live)}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'ugc',
                  header: 'ugc',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.ugc)}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'trtc',
                  header: 'trtc',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.trtc)}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'play',
                  header: 'play',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.play)}</div>
                    </Fragment>
                  ),
                },
                {
                  key: 'allfun',
                  header: 'allfun',
                  width: '60',
                  render: (data) => (
                    <Fragment>
                      <div>{String(data.allfun)}</div>
                    </Fragment>
                  ),
                },
              ]}
              merge={{
                rowspan: ['name'],
                colspan: '',
              }}
            />
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
